<style>
    .header {
      position: fixed;
      top: calc(50vh - 3rem);
      height: 6.5rem;
      left: 50%;
      margin-left: -130px;
      width: 260px;
      background: white;
      /*font-size: 0.28rem;*/
      border-radius: 0.2rem;
    }

    .header .top {
      color: #FFFFFF;
      background: #F96B47;
      /*font-size: 0.28rem;*/
      border-top-left-radius: 0.2rem;
      border-top-right-radius: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 5px;
    }

    .header .cancel {
      position: absolute;
      left: 0;
      top: 45%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    .header .cancel > img {
      width: 0.5rem;
      height: 0.5rem;
      margin-left: 10px;
    }
    .moneyNum {
      text-align: center;
      /*font-size: 0.4rem;*/
      font-weight: bold;
      margin-top: 0.3rem;
      margin-bottom: 0.3rem;
    }
    .passw input{
      width:35px;
      height:35px;
      /*line-height: 60px;*/
      display: inline-block;
      border:1px solid #e3e3e3;
      background-color: #f5f5f5;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
    }
  </style>
<div class="header underLine" id="app">
  <div class="top">
    <div class="text">请输入支付密码</div>
    <div class="cancel" onclick="closePass()"><img src="__IMG__/shareh/close2.png" alt=""></div>
  </div>
  <div class="moneyNum">
    <span id="moneyNum"></span>
  </div>
  <div class="passw size" id="box">
    <input type="tel" name="password" value="" maxlength="1" max="9" inputmode="numeric" pattern="[0-9]*" />
    <input type="tel" name="password" value="" maxlength="1" max="9" inputmode="numeric" pattern="[0-9]*" disabled="disabled"/>
    <input type="tel" name="password" value="" maxlength="1" max="9" inputmode="numeric" pattern="[0-9]*" disabled="disabled"/>
    <input type="tel" name="password" value="" maxlength="1" max="9" inputmode="numeric" pattern="[0-9]*" disabled="disabled"/>
    <input type="tel" name="password" value="" maxlength="1" max="9" inputmode="numeric" pattern="[0-9]*" disabled="disabled"/>
    <input type="tel" name="password" value="" maxlength="1" max="9" inputmode="numeric" pattern="[0-9]*" disabled="disabled"/>
  </div>
  <div class="mask"></div>
</div>
<script>
    window.alert = function(name){
        var iframe = document.createElement("IFRAME");
        iframe.style.display="none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
    }
    var passwordStr = '';
//    $("#box input").eq(0).focus();
    $("#moneyNum").text(payJifen + '积分');
    $("#box input").keyup(function(event) {
        if(passwordStr.length < 6) {
            if ((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 229) {
                if (parseInt($(this).index()) + 1 <= $("#box input").length) {
                    passwordStr += $(this).val();
                    $(this).blur();
                    $(this).val('*');
                    $(this).attr('disabled', 'true');
                    if (parseInt($(this).index()) + 1 < $("#box input").length) {
                        $(this).next('input').removeAttr('disabled');
                        $(this).next('input').focus();
                    }
                }
            } else if (event.keyCode == 8) {
                if ($(this).index() <= 1) {
                    $(this).blur();
                    $(this).val('');
                    $(this).attr('disabled', 'true');
                    $("#box input").eq(0).val('');
                    $("#box input").eq(0).removeAttr('disabled');
                    $("#box input").eq(0).focus();
                    passwordStr = '';
                } else {
                    $(this).blur();
                    $(this).val('');
                    $(this).attr('disabled', 'true');

                    $(this).prev('input').removeAttr('disabled');
                    $(this).prev('input').focus();
                    $(this).prev('input').val('');
                    passwordStr = passwordStr.substring(0, (passwordStr.length)-1);
                }
            }else{
                $(this).val('');
                alert('请输入数字！');
                return false;
            }
            if (passwordStr.length >= 6) {
                payMoney = parseFloat($('#getJiFen').text());
                var remark = '';
                $.ajax({
                    url: "{:url('admin/Share/QRcodePayH5')}",
                    type: 'post',
                    data: {
                        type: 2,
                        payment_type: 0,
                        integral: payJifen,
                        realInputMoney: payMoney,
                        money: 0,
                        remark: remark,
                        passwordStr: passwordStr,
                        payPass: payPass
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 200) {
                            alert('支付成功')
                            setTimeout(function() {
                                location.href = 'https://csdl.jintianjifen.cn/admin/test/test';
                            },1000)
                        } else if (res.status == 1000) {
                            alert(res.msg)
                            $("#box input").blur();
                            $("#box input").val('');
                            $("#box input").attr('disabled', 'true');

                            $("#box input").eq(0).removeAttr('disabled');
                            $("#box input").eq(0).focus();
                            passwordStr = '';
                        } else {
                            alert(res.msg)
                            location.reload();
                        }
                    }
                })
            }
        }
    })
    function closePass() {
        $('.all_div2').css('display','none');
        $('.all_div2').html('');
        $('html,body').removeClass('ovfHiden');
    }
</script>
